Gatsby.js — Page Transitions

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Transitions

We can add transitions when navigation to a different page.

To do this, we add the gsap package and gatsby-plugin-transition-link plugins.

We install them by running:

npm i gsap gatsby-plugin-transition-link

Then in gatsby-config.js , we add:

module.exports = {
  plugins: [
    `gatsby-plugin-transition-link`
  ],
}

Then in our pages, we write:

src/pages/index.js

import React from "react"
import AniLink from "gatsby-plugin-transition-link/AniLink"

const IndexPage = () => {
  return <>
    <div>hello world</div>
    <AniLink paintDrip to="/foo">
      Go to foo
    </AniLink>
  </>
}

export default IndexPage

src/pages/foo.js

import React from "react"
import AniLink from "gatsby-plugin-transition-link/AniLink"

const FooPage = () => {
  return <>
    <div>hello world</div>
    <AniLink paintDrip to="/">
      Go to Index
    </AniLink>
  </>
}

export default FooPage

The AniLink component is a Link component that lets us show transition effects when we click on it.

paintDrip is the effect name. It shows a blue color flowing down the screen.

to has the URL we want to go to.

Custom Transitions

We can also add our own transitions.

We install React Post by running:

npm i react-post

Then we write:

import React from "react"
import { TransitionState } from "gatsby-plugin-transition-link"
import posed from 'react-pose';

const Box = posed.div({
  hidden: { opacity: 0 },
  visible: { opacity: 0.6 },
})

const IndexPage = () => {
  return <>
    <TransitionState>
      {({ transitionStatus, exit, entry, mount }) => {
        console.log("current page's transition status is", transitionStatus)
        console.log("exit object is", exit)
        console.log("entry object is", entry)
        return (
          <Box
            className="box"
            pose={
              mount
                ? 'visible'
                : 'hidden'
            }
          >
            <div>hello world</div>
          </Box>
        )
      }}
    </TransitionState>
  </>
}

export default IndexPage

We use react-pose to create the Box component.

The Box component has the transition effect when the animation begins and ends respectively.

Then we add the TransitionState component to add our transition.

transitionStatus has the status of the transition.

exit has an object with the state of the transition when the transition ends.

entry has an object with the state of the transition when the transition starts.

mount is true when the page is mounted or has mounted.

We set the 'visible' or 'hidden' class when mounted is true or false respectively.

Then ‘hello world’ should end up with opacity being 0.6 at the end.

Excluding Elements from Page Transitions

We can exclude elements from page transitions.

To do this, we write:

module.exports = {
    plugins: [
       {
          resolve: "gatsby-plugin-transition-link",
          options: {
              layout: require.resolve(`./src/components/Layout.js`)
            }
       }
    ]
];

The src/components/Layout.js is excluded from any page transition effects.

Conclusion

We can add page transition effects to our pages with Gatsby.